<template>
   <div id="home">
      <el-container>
        <!-- 头部导航栏 -->
        <el-header class="min_width">
          <nav-bar></nav-bar>
          <div class="banner">
            <img src="../assets/img/b-banner.jpg" alt="">
          </div>
        </el-header>
        <!-- 主体 -->
        <el-main>
          <!-- tab区域 -->
          <div class="b-wrap tab_main">
            <!-- tab栏左边 -->
            <div class="tab_left">
              <ul>
                <li class="tab_left_item">
                  <a href="#">
                    <div class="tab_left_item2">
                      <div class="round">
                        <i class="iconfont"></i>
                      </div>
                      <span>item.name</span>
                    </div>
                  </a>
                </li>
              </ul>
            </div>

             <!-- tab栏中间区域 -->
            <div class="tab_center">
              <span class="tab_center_item">
                <a href="#">
                  <span>item.text</span>
                  <span><img src="../assets/img/999+.png" alt=""></span>
                </a>
              </span>
            </div>
             <!-- tab栏右边 -->
            <div class="tab_right">
              <ul>
                <li class="tab_right_item">
                  <a href="#">
                    <i class="iconfont"></i>
                    <span class="tab_right_text">item.name</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <!-- 轮播图整体 -->
          <div class="b-wrap first-content">
            <!-- 轮播图 -->
            <div class="space-between">
              <el-carousel trigger="click" height="150px">
                <el-carousel-item v-for="item in 5" :key="item">
                  <div>
                    <img class="swiper_img">
                    <div class="swiper_title">item.title</div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            <!-- 轮播图右边 -->
              <div class="swiper_right_content">
                <div class="s_r_c_item">
                  <div>
                    <img src="" alt="">
                    <div class="s_r_c_title">item.title</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 各种内容 -->
          <div class="b-wrap">
            <!-- 番剧 -->
            <div class="various-content">
              <!-- 卡片 -->
              <card class="various-c-card"></card>
              <!-- 排行榜 -->
              <top-list class="various-c-toplist"></top-list>
            </div>

             <!-- 舞蹈 -->
            <div class="various-content">
                <!-- 卡片 -->
                <card class="various-c-card"></card>
                <!-- 排行榜 -->
                <top-list class="various-c-toplist"></top-list>
            </div>

            <!-- 直播 -->
            <div class="various-content">
                <!-- 卡片 -->
                <card class="various-c-card" ></card>
                <!-- 排行榜 -->
                <top-list class="various-c-toplist"></top-list>
            </div>

            <!-- 音乐 -->
            <div class="various-content">
                <!-- 卡片 -->
                <card class="various-c-card"></card>
                <!-- 排行榜 -->
                <top-list class="various-c-toplist"></top-list>
            </div>

            <!-- 时尚 -->
            <div class="various-content">
                <!-- 卡片 -->
                <card class="various-c-card"></card>
                <!-- 排行榜 -->
                <top-list class="various-c-toplist"></top-list>
            </div>
          </div>
        </el-main>

        <!-- 底部 -->
        <v-footer class="home-footer"></v-footer>
      </el-container>

      <!-- 回到顶部 -->
      <el-backtop>
        <div class="backtop-main">
          <img src="../assets/img/backtop.png">
        </div>
      </el-backtop>
    </div>
</template>

<script>
  //引入组件 
  import Card from '../components/common/card/Card.vue';
  import TopList from '../components/common/toplist/TopList.vue'
  export default {
    name:'Home',
    components:{
      Card,
      TopList
    }
  }
</script>

<style>
  .el-container{
    min-width: 1300px !important;
  }
  .el-header {
    position: relative;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(97,112,94,0.1));
  }
  .banner {
    position: absolute;
    left: 0;
    top: 0;
    /* 设置元素的堆叠顺序 */
    z-index: -1;
    width: 100%;
    height: 9.5vw;
    min-height: 155px;
    overflow: hidden;    
  }
  .banner img {
    height: 100%;
  }

  /* 主体区域 */
  .el-main {
    margin-top: 7%;
    height: 100%;
    padding: 0 !important;
  }

  .b-wrap {
    width: 84vw;
    margin: 0 8vw;
    min-width: 1170px;
  }

  .tab_main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 108px;
    padding: 20px 0;
  }

  /* tab栏左边区域 */
  .tab_left {
    width: 200px;
  }
  .tab_left_item {
    width: 50px;
    height: 68px;
    text-align: center;
    font-size: 14px;
  }
  .tab_left_item2 {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .round{
   display: inline-block;
   width: 36px;
   height: 36px;
   line-height: 36px;
  }
  .round i {
    color: #fff;
    border-radius: 50%;
    padding: 5px;
    font-size: 20px;
  }

  /* tab中间区域 */
  .tab_center {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: center;
    border-left: 1px solid rgba(105, 105, 105, 0.2);
     border-right: 1px solid rgba(105, 105, 105, 0.2);
  }
  .tab_center_item {
    display: inline-block;
    width: 10%;
    font-size: 14px;
    margin-top: 5px;
  }
  .tab_center_item span {
    margin-right: 2px;
  }
  .tab_center_item span img{
    width: 28px;
  }

  /* tab右边区域 */
  .tab_right {
    margin-left: 8px;
    width: 216px;
  }
  .tab_right ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 0;
  }
  .tab_right_item {
    font-size: 14px;
    margin-right: 6px;
    margin-top: 3px;
  }
  .tab_right_item i {
    font-size: 18px;
    margin-right: 5px;
  }

  /* 第一内容 */
  .first-content {
    height: 17vw;
    min-height: 220px;
  }
  /* 轮播图 */
  .space-between {
    display: flex;
    justify-content: space-between;
    height: 100%;
  }
  .el-carousel {
    width: 500px;
    height: 100% !important;
    border-radius: 8px;
    box-shadow: 0px 0px 5px rgba(0, 0,0, 0.3);
  }
  .el-carousel_container{
    height: 100% !important;
  }
  .el-carousel__item {
    width: 550px;
    height: 100% !important;
  }
  .swiper_img {
    display: inline-block;
    width: 100%;
  }
  .swiper_title {
    display: inline-block;
    width: 50%;
    position: absolute;
    left: 15px;
    bottom: 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    /* 一行显示 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  /* 轮播图右边 */
  .swiper_right_content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    margin-left: 1vw;
  }
  .s_r_c_item {
    position: relative;
    width: 32%;
    height: 48%;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  }
  .s_r_c_item img {
    width: 100%;
    display: block;
  }
  .s_r_c_title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 23px;
    color: #fff;
    font-size: 14px;
    background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.6),
    rgba(119, 119, 119, 0.1)
    );
    padding: 2px 5px  5px;
    /* 一行显示 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .title_two_show {
    -webkit-line-clamp: 2;
  }

  /* 各种内容区域 */
  .various-content {
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
  }
  .various-c-card {
    width: 75%;
  }
  .various-c-toplist {
    flex: 1;
  }

  /* 底部 */  
  .home-footer {
    margin-top: 50px;
  }

  /* 回到顶部 */
  .backtop-main img {
    width: 4%;
    float: right;
    margin-right: 40px;
    margin-bottom: 10px;
  }
</style>